<template>
  <div>
    <h3>{{ title }}</h3>
    <vs-checkbox
      v-for="(opt, i) in options"
      :key="i"
      :val="opt.value"
      :value="value"
      @input="onInput"
    >
      {{ opt.label }}
    </vs-checkbox>
  </div>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: {
    title: {
      required: true,
      type: String
    },
    options: {
      required: true,
      type: Array
    },
    value: {
      required: true
    }
  },
  methods: {
    onInput(e) {
      this.$emit("input", e);
    }
  }
});
</script>

<style>
.vs-checkbox-content {
  margin: 0.5rem 1rem;
}
</style>
